<template>
<div>
  <div class="rowBox" v-if="layoutArr && layoutArr.length">
    <el-row :gutter="20" class="rowStyle el-box" v-for="(itemRow, indexRow) in layoutArr" :key="indexRow">
      <el-col :span="itemIn.num" v-for="(itemIn, indexIn) in itemRow" :key="indexIn">
        <div class="grid-content bg-purple grid-content-empty" :class="{'empty': !itemIn.childList || !itemIn.childList.length}">
          <draggable
            :options="{group: falgs, disabled: false}"
            :list="itemIn.childList"
            class="dragAreaAll"
            v-if="!itemIn.childList || !itemIn.childList.length" 
          >
            <div class="tips">拖拽元素至此</div>
          </draggable>
          <draggable
            :options="{group: falgs, disabled: false}"
            :list="itemIn.childList"
            class="dragAreaAll"
            v-else
          >
            <components
              @editEvent="editEvent"
              @handDelProject="handDelProject(itemIn.childList, childIndex)"
              v-for="(childItem, childIndex) in itemIn.childList" :key="childIndex"
              :is="childItem.name"
            />
          </draggable>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 编辑组件名称 -->
  <el-drawer
    title="编辑"
    :visible.sync="dialogEdit"
    :before-close="editClose"
    direction="rtl"
    custom-class="demo-drawer"
    ref="drawer"
    :wrapperClosable="true"
    :close-on-press-escape="false"
  >
    <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 6px;">
      <el-form label-width="100px" :model="formInline" ref="formInline" class="el-flex">
        <el-form-item label="组件名称:" prop="appCode">
          <el-col :span="15">
            <el-input v-model="formInline.name" placeholder="组件名称"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
        <el-button type="primary" @click="sureDrawer">
          确定
          <i class="el-icon-document-checked el-icon--right"></i>
        </el-button>
        <el-button @click="cancelDrawer">
          取消
          <i class="el-icon-refresh-left"></i>
        </el-button>
      </div>
    </div>
  </el-drawer>
</div>
</template>
<script>
import { MessageBox, Message, Tabs, TabPane, Drawer } from 'element-ui'
import componentsProject from './componentsProject' // 任务
import messageCenter from './messageCenter' // 消息中心
import calendar from './calendar' // 日历
import userFunction from './userFunction' // 常用功能
import announcement from './announcement' // 公告
import library from './library' // 文库
import groupNews from './groupNews' // 集团新闻
import componentsApproval from './componentsApproval' // 统一审批中心
import draggable from 'vuedraggable' // 引入拖拽
export default {
  props: ['layoutArr'],
  components: {
    'el-tabs': Tabs, // 标签页
    'el-tab-pane': TabPane, // 标签页列
    'el-drawer': Drawer,
    componentsProject, // 任务
    messageCenter, // 消息中心
    calendar, // 日历
    userFunction, // 常用功能
    announcement, // 公告
    library, // 文库
    groupNews, // 集团新闻
    componentsApproval, // 统一审批中心
    draggable, // 拖拽
  },
  data () {
    return {
      dialogEdit: false, // 编辑弹框是否显示字段
      falgs: 'article', // 要实现两个组件之间的拖拽，需要两个组件的options的group名称保持一致！group：'111'或者group:{name:'111'}，写法都可以
      formInline: {}
    }
  },
  methods: {
    // 关闭弹框
    editClose () {
      this.dialogEdit = false
    },
    // 显示弹框
    editEvent () {
      this.dialogEdit = true
    },
    // 确定按钮
    sureDrawer () {
      this.editClose()
    },
    // 取消按钮
    cancelDrawer () {
      this.editClose()
    },
    // 删除任意一个布局里的项目
    handDelProject (data, index) {
      data.splice(index, 1)
    },
    // 显示编辑项目弹框
    editEvent () {
       this.dialogEdit = true
    }
  }
}
</script>
<style lang="scss">
.rowBox {
  box-sizing: border-box;
  padding: 0 10px;
}
.rowStyle {
  display: flex;
  margin-top: 12px;
  .grid-content-empty.grid-content.bg-purple {
    min-height: 174px;
    position: relative;
    left: 0;
    top: 0;
    &.empty {
      height: 100%;
    }
    .tips {
      position: absolute;
      left: 0;
      top: 35%;
      width: 100%;
      height: 100%;
    }
  }
}
</style>